<template>
  <div>
    <a-row
      type="flex"
      justify="center"
      :style="{'align-content': 'center','background-color': '#3052CC','height': winHeight}">
      <a-col :span="5">
      </a-col>
      <a-col :span="9">
<!--        <div style="margin-top: 60px; margin-bottom: 60px;">-->
<!--          <img src="~@/assets/login.png" style="height: 380px;" alt="logo">-->
<!--        </div>-->
      </a-col>
      <a-col :span="1">
      </a-col>
      <a-col :span="6">
        <div style="margin-top: 60px; margin-bottom: 60px; border-radius: 5px;background-color: white; padding: 20px 30px 10px 30px;">
          <div style="font-weight: bold; font-size: large; color: #303133;">
            用户登录
          </div>
          <div style="margin: 20px 0 10px 0;">
            <a-form
              id="formLogin"
              class="user-layout-login"
              ref="formLogin"
              :form="form"
              @submit="handleSubmit"
            >
              <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 10px;" :message="this.errorMsg" />
              <a-form-item>
                <a-input
                  size="large"
                  type="text"
                  placeholder="登录账号"
                  v-decorator="[
                    'loginName',
                    {rules: [{ required: true, message: '请输入登录账号', trigger: 'blur' }]}
                  ]"
                >
                  <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
              </a-form-item>
              <a-form-item style="margin-top: 30px;">
                <a-input
                  size="large"
                  type="password"
                  autocomplete="false"
                  placeholder="登录密码"
                  v-decorator="[
                    'loginPwd',
                    {rules: [{ required: true, message: '请输入登录密码' },
                             { validator: validateLoginPwd, trigger: 'blur' }]}
                  ]"
                >
                  <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
              </a-form-item>

<!--              <a-form-item style="margin-top: 30px;">-->
<!--                <a-row :gutter="12">-->
<!--                  <a-col :span="13">-->
<!--                    <a-input-->
<!--                      size="large"-->
<!--                      type="text"-->
<!--                      autocomplete="false"-->
<!--                      placeholder=" 验 证 码"-->
<!--                      v-decorator="[-->
<!--                        'authCode',-->
<!--                        {rules: [{ required: true, message: '请输入验证码' }]}-->
<!--                      ]"-->
<!--                    >-->
<!--                      <a-icon slot="prefix" type="safety" :style="{ color: 'rgba(0,0,0,.25)' }"/>-->
<!--                    </a-input>-->
<!--                  </a-col>-->
<!--                  <a-col :span="11">-->
<!--                    <img :src="imageCode" style="margin-top: -6px;" @click="getKaptcha" width="110px"/>-->
<!--                  </a-col>-->
<!--                </a-row>-->
<!--              </a-form-item>-->
              <a-form-item style="margin: 40px 0px 30px 0px;">
                <a-button
                  size="large"
                  type="primary"
                  htmlType="submit"
                  class="login-button"
                  :loading="state.loginBtn"
                  :disabled="state.loginBtn"
                >登录</a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </a-col>
      <a-col :span="3">
      </a-col>
    </a-row>
    <a-row>
    </a-row>
  </div>
</template>

<script>
import md5 from 'md5'
import { mapActions } from 'vuex'
import { timeFix } from '@/utils/util'
// import { kaptcha } from '@/api/system/account'

export default {
  // ####################
  data () {
    return {
      loginBtn: false,
      isLoginError: false,
      errorMsg: '用户名或密码错误',
      randomUuid: '',
      imageCode: '',
      form: this.$form.createForm(this),
      state: {},
      winHeight: ''
    }
  },
  created () {
    // const _this = this
    this.winHeight = window.innerHeight - 180 + 'px'
  },
  methods: {
    ...mapActions(['Login', 'Logout']),
    // handler
    // 前端验证登录密码的合法性
    validateLoginPwd (rule, value, callback) {
      const regex = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{6,}$/
      if (regex.test(value)) {
        return callback()
      } else {
        return callback(new Error('大/小写字母，数字，特殊符号四选三，长度至少6位'))
      }
    },
    handleTabClick (key) {
    },
    // getKaptcha () {
    //   const _this = this
    //   kaptcha()
    //     .then(res => {
    //       if (res.message !== 'error') {
    //         _this.randomUuid = res.result.uuid
    //         _this.imageCode = res.result.image
    //       } else {
    //         this.$message.error('操作失败！')
    //       }
    //     })
    // },
    handleSubmit (e) {
      e.preventDefault()
      const {
        form: { validateFields },
        Login
      } = this
      this.loginBtn = true
      validateFields({ force: true }, (err, values) => {
        const _this = this
        if (!err) {
          const loginParams = { ...values }
          loginParams.loginPwd = md5(values.loginPwd)
          // loginParams.randomId = this.randomUuid
          Login(loginParams)
            .then((res) => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              _this.loginBtn = false
            })
        } else {
          setTimeout(() => {
            _this.loginBtn = false
          }, 300)
        }
      })
    },
    loginSuccess (res) {
      if (res.status === 200) {
        this.$router.push({ path: '/' })
        // 延迟 1 秒显示欢迎信息
        setTimeout(() => {
          this.$notification.success({
            message: '欢迎',
            description: `${timeFix()}，欢迎回来`
          })
        }, 200)
      } else {
        this.isLoginError = true
        this.errorMsg = res.message
      }
    },
    requestFailed (err) {
      this.isLoginError = true
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      background-color: #063977;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }
</style>
